<layout name="mun" />
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="__CSS__easyui.css">
	<link rel="stylesheet" type="text/css" href="__CSS__icon.css">
	<link rel="stylesheet" type="text/css" href="__CSS__demo.css">
	<script type="text/javascript" src="__JS__jquery.min.js"></script>
	<script type="text/javascript" src="__JS__jquery.easyui.min.js"></script>
	<link href="__CSS__main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="right_font">
  <img src="__IMG__main_14.gif"/> 您现在所在的位置：首页 → 系统管理 → 
  <span class="bfont">用户管理</span>
</div>
<div style="margin:20px 0;" align="center"></div>
  <div id="tb" align="center" style="width:80%; margin-bottom:10px">

    账号：<input name="Account" class="easyui-text" style="width:150px; margin-right:50px;">
    员工编号：<input name="SysEmpID" class="easyui-text" style="width:150px; margin-right:50px;">
    状态：<select  name = "Status" style="width:150px;" class="easyui-combobox" data-options="editable:false,panelHeight:'auto'">
    <option value="-">&nbsp;</option>
    		<option value="0">正常</option>
   		 <option value="1">逻辑删除</option>
    </select>
    <a id="Seo" href="javascript:;" class="easyui-linkbutton" iconCls="icon-search" style="margin-left:30px" plain="true">搜索</a>
<a href="javascript:;" id="addUser" class="easyui-linkbutton" iconCls="icon-add" style="margin-left:30px" plain="true">添加用户</a>
  </div>
    <!-- 
        1.rownumbers属性为true，会带有行号，该行号和数据库中的字段id无关 
        2.singleSelect属性为TRUE，则一次只能选中一行
        3.pagination属性为true，则会在底部自动显示分页工具栏
        4.url属性为读取的数据集地址，这里采用了json文件
        5.method属性为页面取值的方法
        6.idField属性定有了作为序号的字段（可以指定为任意字段），该字段的值会表示在复选框一列
    -->
	<table id="dg" title="用户信息列表(双击操作按钮进行对应操作)" style="width:100%;height:345px"
           data-options="rownumbers:false,striped:true,singleSelect:true,
                         pagination:true,url:'{:U(\"UserList/data\")}',method:'post',
                         idField:'id',onDblClickCell:show">
		<thead>
			<tr>
				<th data-options="field:'ck',width:30" checkbox="true"></th>
                <!-- 
                    宽度使用$(this).width()*0.2意思是使用当前表格的宽度的20%
                    当数据包含中文或其他文字时，读取时如果有乱码，可以用记事本打开json文件，并将其另存为编码是utf8格式的文件
                    如果是程序生成的文件，则需要在生成文件时注意编码格式
                    分页功能的实现请根据对应的语言环境实现
   				-->
                <th data-options="field:'id',width:$(this).width()*0.2,align:'center'">用户编号</th>
				<th data-options="field:'account',width:$(this).width()*0.2,align:'center'">登录账号</th>
				<th data-options="field:'status',width:$(this).width()*0.2,align:'center',formatter:cellFormat">状态</th>
                <th data-options="field:'sysempid',width:$(this).width()*0.22,align:'center'">员工编号</th>
                <th data-options="field:'view',width:$(this).width()*0.05,align:'center',formatter:doView">&nbsp;</th>
                <th data-options="field:'edit',width:$(this).width()*0.05,align:'center',formatter:doEdit">操作</th>
                <th data-options="field:'dele',width:$(this).width()*0.05,align:'center',formatter:doDele">&nbsp;</th>
			</tr>
		</thead>
	</table> 
	<!-- 查看的div -->
    <div id="viewWindow" style="width:540px;height:400px;font-size:16;">  
      <div id="leftShow" style="float:left">
       <form id="fv" method="post">
        <table cellpadding="5">
          <tr>
              <td>登录账号</td>
              <td><input name="account" class="easyui-textbox" readonly/></td>
          </tr>
          <tr>
              <td>用户状态</td>
              <td>
              <input name="Status" type="radio" value="0"/>正常
              <input name="Status" type="radio" value="1"/>逻辑删除
              </td>
          </tr>
          <tr>
              <td>员工编号</td>
              <!-- 这里用关联查询出员工姓名显示在这里 -->
              <td><input name="sysempid" class="easyui-textbox" value=""/></td>
          </tr>
          <tr>
              <td colspan="2" align="center">
                  <a href="#" class="easyui-linkbutton" onclick="javascript:$('#viewWindow').window('close')" iconcls="icon-cancel">取消</a>
              </td>
          </tr>
	    </table>
       </form>
      </div>
      <div id="rightShow" style="float:left">
       <!-- 增加改用户的权限树展示 -->
        <div class="easyui-panel" id="tree" style="width:302px; height:300px; float:left;">
          <ul id="ttv" class="easyui-tree" data-options="method:'post',animate:true"></ul>
        </div>
      </div>     
    </div>  
    <!-- 编辑的div -->
    <div id="editWindow" style="width:540px;height:400px;font-size:16;">  
    <div id="leftShow" style="float:left">
      <form id="fe" method="post" data-options="novalidate:true"> 
        <table cellpadding="5">
          <tr>
              <td>用户编号</td>
              <td><input name="id" class="easyui-textbox" readonly/></td>
          </tr>
          <tr>
              <td>登录账号</td>
              <td><input name="account" class="easyui-textbox" readonly/></td>
          </tr>
          <tr>
              <td>用户状态</td>
              <td>
              <input name="status" type="radio" value="0"/>正常
              <input name="status" type="radio" value="1"/>逻辑删除
              </td>
          </tr>
          <tr>
              <td>员工编号</td>
              <!-- 这里用关联查询出员工姓名显示在这里 -->
              <td><input name="sysempid" class="easyui-textbox" value=""/></td>
          </tr>
          <tr>
              <td colspan="2" align="center">
                  <a href="#" class="easyui-linkbutton"  id="editSave"  iconcls="icon-save">保存</a>
                  <a href="#" class="easyui-linkbutton" onclick="javascript:$('#editWindow').window('close')" iconcls="icon-cancel">取消</a>
              </td>
          </tr>
	    </table>
      </form> 
      </div>
      <div id="rightShow" style="float:left">
       <!-- 增加改用户的权限树展示 -->
        <div class="easyui-panel" id="tree" style="width:302px; height:300px; float:left;">
          <ul id="tte" class="easyui-tree" data-options="method:'get',animate:true"></ul>
        </div>
      </div>  
    </div> 
    <!-- 添加的div -->
    <div id="addWindow" style="width:340px;height:300px;font-size:16;">  
    <div id="leftShow" style="float:left">
      <form id="fe" method="post" data-options="novalidate:true"> 
        <table cellpadding="5">
          <tr>
              <td>登录账号</td>
              <td><input name="Account" class="easyui-textbox"/></td>
          </tr>
          <tr>
              <td>登录密码</td>
              <td><input name="Password" class="easyui-textbox" type="password"/>(不填默认123456)</td>
          </tr>
          <tr>
              <td>用户状态</td>
              <td>
              <input name="Status" type="radio" value="0" checked='true'/>正常
              <input name="Status" type="radio" value="1"/>逻辑删除
              </td>
          </tr>
          <tr>
              <td>员工编号</td>
              <!-- 这里用关联查询出员工姓名显示在这里 -->
              <td><input name="SysEmpID" class="easyui-textbox" value=""/></td>
          </tr>
          <tr>
              <td colspan="2" align="center">
                  <a  id="addCheck" href="javascript:;'" class="easyui-linkbutton"  iconcls="icon-save">保存</a>
                  <a href="#" class="easyui-linkbutton" onclick="javascript:$('#addWindow').window('close')" iconcls="icon-cancel">取消</a>
              </td>
          </tr>
	    </table>
      </form> 
      </div> 
    </div> 
	<script type="text/javascript">
	    // 格式化数据显示内容，为0显示“正常”，为1显示“逻辑删除”
		function cellFormat(value,row,index){
			if (value == 0){
				return '正常';
			}else{
				return '逻辑删除';
			}
		}
		// 执行数据修改操作
	    $("#editSave").click(function(){
	    	var idVal = $('#editWindow input[name=id]').val();
	    	var statusVal = $('#editWindow input[name=status]:checked').val();
	    	var sysempidVal = $("#editWindow input[name=sysempid]").val();
	    	$.post("{:U('UserList/redact')}",{
	    		id:idVal,
	    		status : statusVal,
	    		sysempid : sysempidVal
	    	},function(data){
	    		if(data.status ==1 ){
	    			alert(data.info);
	    			location.href=data.url;
	    			return false;
	    		}else{
	    			alert(data.info);
	    			location.href=data.url;
	    			return false;
	    		}
	    	});
	    });
		// 创建3个超链接放入到“操作”这一列
		function doView(value,row,index){
			return "<a href='javascript:void(0)' class='do' id='view'>查看</a> ";
		}
		function doEdit(value,row,index){
			return "<a href='javascript:void(0)' class='do' id='edit'>修改</a> ";
		}
		function doDele(value,row,index){
			return "<a href='javascript:void(0)' class='do' id='delete'>删除</a>";
		}
		// 打开模式窗口的方法，根据传入超链接的field决定打开什么窗口
		function show(rowIndex, field, value){		  
		  // 获得选中行的数据集
		  var row = $('#dg').datagrid('getSelected');
		  // 判断数据集是否为空
		  if (row){			 
			  // 根据id打开对应窗口
			  if(field=="view"){
				  // 将数据集中的内容加载到表单中
				   var idVal = row.id;  //获取当前ID
			      $("#fv").form("load", row);
				  $("#ttv").tree({
					 // json文件由对应语言生成
					url:"{:U('UserList/chmod')}?id="+idVal
				  });
				  viewDataWin.window('open');  
			  }else if(field=="edit"){
				  var idVal = row.id; //获取当前ID
				  $("#fe").form("load", row);
				  $("#tte").tree({
					 // json文件由对应语言生成
					 //url:'tree_data1.json'
					  url:"{:U('UserList/chmod')}?id="+idVal
				  });
				  editDataWin.window('open');   
			  }else{
				  // 执行删除操作
				 var idVal = row.id;
				 $.post("{:U('UserList/Dell')}",{
					 ID:idVal
				 },function(data){
					 if(data.status ==1 ){
			    			alert(data.info);
			    			location.href=data.url;
			    			return false;
			    		}else{
			    			alert(data.info);
			    			location.href=data.url;
			    			return false;
			    		} 
				 });
			  }		         
		  }else{
			  $.messager.alert('警告','至少选择一条数据!','warning');
		  } 		
		};
		$(function(){
			viewDataWin = $('#viewWindow').window({                    
			  title:'查看用户详细信息',  
			  left:'250px',  
			  top:'180px',  
			  closed: true,  
			  modal: true,  
			  cache: false,  
			  minimizable:false,  
			  maximizable:false,  
			  collapsible:false,  
			  shadow: true,
			});  
			editDataWin = $('#editWindow').window({                    
			  title:'编辑用户详细信息',  
			  left:'250px',  
			  top:'180px',  
			  closed: true,  
			  modal: true,  
			  cache: false,  
			  minimizable:false,  
			  maximizable:false,  
			  collapsible:false,  
			  shadow: true  
			}); 
			addDataWin = $('#addWindow').window({                    
				  title:'添加用户信息',  
				  left:'250px',  
				  top:'180px',  
				  closed: true,  
				  modal: true,  
				  cache: false,  
				  minimizable:false,  
				  maximizable:false,  
				  collapsible:false,  
				  shadow: true  
			});
			$("#addUser").click(function(){
				addDataWin.window('open'); 
			});
		    
			var pager = $('#dg').datagrid().datagrid('getPager');	// 得到json中的数据		
			pager.pagination({
				//每页显示的记录条数，默认为10
				pageSize: 10,  
				//可以设置每页记录条数的列表
        		pageList: [5,10,15],  
				//页数文本框前显示的汉字  
        		beforePageText: '第',
				// 总页数汉字
        		afterPageText: '页    共 {pages} 页',  
				// 重写总页数显示内容
				displayMsg:"当前显示 {from} 到 {to} 条数据 共有 {total} 条数据",
				// 改方法为点击刷新按钮时触发
				onRefresh:function(){
					alert("点击了刷新按钮");
				},
				// 以下代码创建了分页工具栏中的查看、添加、编辑按钮，暂不使用
				buttons:[{
					iconCls:'icon-search',
					text:"查看",
					handler:function(){
						// 调用查看内容的方法
						openFormWindow("view");
						// 获得选中行的内容
						//var ids= $('#dg').datagrid('getSelections');
//						for(var i=0;i<ids.length;i++){
//							alert(ids[i].id);
//						}		
					}
				},{
					iconCls:'icon-edit',
					text:"修改",
					handler:function(){
						openFormWindow("edit");
					}
				}]
			});	
		})
		$("#Seo").click(function(){
	            var account  = $('input[name=Account]').val();
	            var sysempid = $('input[name=SysEmpID]').val();
	            var status = $('input[name=Status]').val();
			            $("#dg").datagrid("reload",{
			                Account:account,
			                SysEmpID:sysempid,
			               Status:status
			            });
			});
		$("#addCheck").click(function(){
			$.post("{:U('UserList/addCheck')}",{
				Account : $("#addWindow input[name=Account]").val(),
				Password : $("#addWindow input[name=Password]").val(),
				Status : $('#addWindow input[name=Status]:checked').val(),
				SysEmpID : $("#addWindow input[name=SysEmpID]").val()
			},function(data){
				 if(data.status ==1 ){
		    			alert(data.info);
		    			location.href=data.url;
		    			return false;
		    		}else{
		    			alert(data.info);
		    			location.href=data.url;
		    			return false;
		    		} 
				
			});
		});
	</script>
</body>
</html>
